<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>港约,寻找志同道合</title>
    <link rel="icon" type="image/gif" href="../static/img/xjtu.gif" />

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/animations.css">

    <!-- simple style -->
    <link href="../static/css/style.css" rel="stylesheet">
    <!-- fonticon -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 300px;
            opacity: 0.6;
        }
    </style>
</head>

<body style="background:url(./static/img/main-bg-compressor.jpg) no-repeat; background-size:cover;">
    <div class="cloud floating">
        <img src="../static/img/cloud.png" alt="Scoop Themes">
    </div>
    <div class="cloud pos1 fliped floating">
        <img src="../static/img/cloud.png" alt="Scoop Themes">
    </div>

    <div class="cloud pos2 floating">
        <img src="../static/img/cloud.png" alt="Scoop Themes">
    </div>

    <div class="cloud pos3 fliped floating">
        <img src="../static/img/cloud.png" alt="Scoop Themes">
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h1 class="text-center display-1" style="color:rgb(255, 255, 255)">
                        <strong>港 约</strong><br>
                    </h1>
                    <hr>
                    <h3 class="text-center" style="color:rgb(255, 255, 255)">
                        <em><small>寻找志同道合的小伙伴！</small></em>
                    </h3>
                </div>
                <br>
                <p class="text-center text-success">
                    <a class="btn btn-success btn-large" href="/sign_in"><i class="fa fa-sign-in"
                            aria-hidden="true"></i><strong> 登 录</strong></a>
                    &ensp;&ensp; &ensp;
                    <a class="btn btn-success btn-large" href="/sign_up"><i class="fa fa-user-plus"
                            aria-hidden="true"></i><strong> 注 册</strong></a>
                </p>
            </div>

        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div style="text-align:center">
                    <i class="fa fa-github-alt fa-2x" aria-hidden="true"><a href="https://github.com/cucou0313/gangyue"
                            style="color: seashell;"> https://github.com/cucou0313/gangyue</a></i>
                </div>
                <hr />
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                        <li data-target="#demo" data-slide-to="3"></li>
                        <li data-target="#demo" data-slide-to="4"></li>
                        <li data-target="#demo" data-slide-to="5"></li>
                        <li data-target="#demo" data-slide-to="6"></li>
                    </ul>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <!-- image1 -->
                        <div class="carousel-item active">
                            <img src="../static/img/bg-banner1.jpg">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>软件工程综合训练</strong><small>___01组</small>
                                </h1>
                                <ul>
                                    <li>
                                        <h4>在西安交通大学科技创新港地区能找到觅食、学习和兴趣爱好相同的伙伴。</h4>
                                    </li>
                                    <li>
                                        <h4>主要面向交大学生，而且实名认证，每个用户使用自己的学号和姓名进行注册。</h4>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- image2 -->
                        <div class="carousel-item">
                            <img src="../static/img/bg-banner2.png">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>可以约运动</strong>
                                </h1>
                                <h3>
                                    联系同学打羽毛球、篮球、游泳、网球等各项已于爱好。
                                </h3>
                            </div>
                        </div>
                        <!-- image3 -->
                        <div class="carousel-item">
                            <img src="../static/img/bg-banner3.jpg">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>可以约饭拼单</strong>
                                </h1>
                                <h3>
                                    找到对美食有同样需求的同学。
                                </h3>
                            </div>
                        </div>
                        <!-- image4 -->
                        <div class="carousel-item ">
                            <img src="../static/img/bg-banner4.jpeg">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>可以约聚会</strong>
                                </h1>
                                <h3>
                                    可以约聚会活动或者桌游等娱乐活动。
                                </h3>
                            </div>
                        </div>
                        <!-- image5 -->
                        <div class="carousel-item">
                            <img src="../static/img/bg-banner5.jpg">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>可以约上自习</strong>
                                </h1>
                                <h3>
                                    在某个时间去5号楼或者图书馆看书，学习，讨论问题
                                </h3>
                            </div>
                        </div>
                        <!-- image6 -->
                        <div class="carousel-item ">
                            <img src="../static/img/bg-banner6.jpg">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>可以约旅游</strong>
                                </h1>
                                <h3>
                                    找到一块去周边景区的小伙伴游玩。
                                </h3>
                            </div>
                        </div>
                        <!-- image7 -->
                        <div class="carousel-item">
                            <img src="../static/img/bg-banner7.jpg">
                            <div class="carousel-caption">
                                <h1>
                                    <strong>可以求助同学解决日常难题</strong>
                                </h1>
                                <h3>
                                    比如修电脑，手机升级等等问题。
                                </h3>
                            </div>
                        </div>
                    </div>
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
        </div>
</body>

</html>